<template>
     <div class="page-search-product" id="page-wrapper">
        <div class="header fix-header">渔愉鱼真假药查询平台</div>
        <div class="form-wrapper">
            <el-form ref="submitInfo" :model="submitInfo" :rules="submitForm">
                <el-form-item class="form-item" label="产品包装正面图" :label-width="formLabelWidth" prop="productFrontImgUrl">
                    <div class="upload-wrapper">
                        <el-upload
                            class="product-front-img-uploader"
                            action=""
                            :http-request="uploadProductFrontImg"
                            :multiple="isSelectAll"
                            :file-list="productFrontImgList"
                            >
                            <img v-if="submitInfo.productFrontImgUrl" :src="submitInfo.productFrontImgUrl" class="productImg">
                            <i v-else class="el-icon-plus add-img-icon"></i>
                        </el-upload>
                    </div>   
                </el-form-item>
                <el-form-item class="form-item" label="产品包装背面图" :label-width="formLabelWidth" prop="productBackImgUrl">
                    <div class="upload-wrapper">
                        <el-upload
                            class="product-back-img-uploader"
                            action=""
                            :http-request="uploadProductBackImg"
                            :multiple="isSelectAll"
                            :file-list="productBackImgList"
                            >
                            <img v-if="submitInfo.productBackImgUrl" :src="submitInfo.productBackImgUrl" class="productImg">
                            <i v-else class="el-icon-plus add-img-icon"></i>
                        </el-upload>
                    </div>   
                </el-form-item>
                <el-form-item class="form-item" label="姓名" :label-width="formLabelWidth" prop="userName">
                    <el-input v-model="submitInfo.userName" placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth" prop="telephone">
                    <el-input v-model="submitInfo.telephone" placeholder="请输入联系电话" maxlength="11" />
                </el-form-item>
            </el-form>
        </div>
        <div class="footer-btn">
            <el-button type="primary" class="confirm-btn" @click="confirmSubmit">确认提交</el-button>
        </div>
        <el-dialog
            :visible="isShow"
            center
            :width="dialogWidth"
            @close="closeModal"
            >
            <el-row class="title-text">
                <div>感谢您的提交，</div>
                <div>我们将尽快回复您！</div>
            </el-row>
            <el-row class="response-text clearFix">
                <div class="label">集中回复时间：</div>
                <div class="time">
                    <span>上午11:00-12:00</span>
                    <span>下午17:00-18:00</span>
                </div>
            </el-row>
            <el-row class="contact-info">
                <label class="v-middle">
                    紧急情况请联系：
                    <span>微信号 157181741</span>
                </label>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="closeModal">继续查询</el-button>
                <el-button type="primary" @click="closeModal">关闭页面</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'SearchProduct',
    data() {
        const checkPhone = (rule, value, callback) => {
            if (!value || !(/^1\d{10}$/.test(value))) {
                callback(new Error("手机号码必填且开头只能为1的11位数字！"))
            } else {
                callback()
            }
        }
        return {
            baseUrl: 'http://happyfish.yudada.com/',
            loading: false,
            formLabelWidth: '130px',
            dialogWidth: '95%',
            isShow: false,
            submitInfo: {
                // 产品正面图Url
                productFrontImgUrl: '',
                // 产品背面图Url
                productBackImgUrl: '',
                // 用户名
                userName: '',
                // 手机号
                telephone: ''
            },
            submitForm: {
                productFrontImgUrl: [
                    { required: true, message: '请上传产品正面图', trigger: 'change' }
                ],
                productBackImgUrl: [
                    { required: true, message: '请上传产品背面图', trigger: 'change' }
                ],
                userName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 8, message: '用户名必填且长度在2-8之间！', trigger: 'blur' }
                ],
                telephone: [
                    { required: true, validator: checkPhone, trigger: 'blur' }
                ]
            },
            // 是否支持多选
            isSelectAll: false,
            productFrontImgList: [],
            productBackImgList: []
        }
    },
    methods: {
        // 上传产品正面图
        uploadProductFrontImg(item) {
            const vm = this
            vm.uploadFile(item, 1)
        },
        // 上传产品背面图
        uploadProductBackImg(item) {
            const vm = this
            vm.uploadFile(item, 2)
        },
        // 上传文件
        uploadFile(item, type) {
            const vm = this
            const fileObj = item.file
            // FormData 对象
            const fd = new FormData()
            // 文件对象
            fd.append('file', fileObj)
            const base_url = 'https://t.lansong.admin.yudada.com/javaApi'
            const token = '7d2d8e85a26c4a689b4dcdd8ca60ef94'
            this.$axios({
                url: `${base_url}/file/oss/images`,
                method: 'post',
                data: fd,
                params: {
                    type: 13
                },
                headers: {
                    'access-token': token
                }
            })
                .then((response) => {
                    const res = response.data
                    vm.loading = false
                    if (res.code != 1) {
                        this.$message({
                            message: res.message || 'Error',
                            type: 'error',
                            duration: 5 * 1000
                        });
                        return
                    }
                    if (type == 1) {
                        vm.submitInfo.productFrontImgUrl = res.data
                    } else {
                        vm.submitInfo.productBackImgUrl = res.data
                        console.log(vm.submitInfo.productBackImgUrl)
                    }
                })
                .catch((error) => {
                    vm.loading = false
                    this.$message({
                        message: error.message,
                        type: 'error',
                        duration: 5 * 1000
                    })
                    if (type == 1) {
                        vm.submitInfo.productFrontImgUrl = ''
                        vm.productFrontImgList = []
                    } else {
                        vm.submitInfo.productBackImgUrl = ''
                        vm.productBackImgList = []
                    }
                })
        },

        // 确认提交
        confirmSubmit() {
            const vm = this
            if (vm.isSubmit){
                return
            }
            vm.isSubmit = true
            setTimeout(() => {
                vm.isSubmit = false
            }, 4000)
            vm.$refs.submitInfo.validate(valid => {
                if (valid) {
                    const { productFrontImgUrl, productBackImgUrl, userName, telephone  } = vm.submitInfo
                    const data = {
                        aheadImageUrl: productFrontImgUrl,
                        backImageUrl: productBackImgUrl,
                        name: userName,
                        phone: telephone
                    }
                    vm.$axios({
                        url: `${this.baseUrl}fish/medicine/info`,
                        method: 'post',
                        data
                    })
                        .then((response) => {
                            const res = response.data
                            if (res.code != 1) {
                                this.$message({
                                    message: res.message || 'Error',
                                    type: 'error',
                                    duration: 5 * 1000
                                });
                                return
                            }
                            vm.isShow = true
                            vm.resetSubmitInfo()
                            vm.resetForm()
                        })
                        .catch((error) => {
                            this.$message({
                                message: error.message,
                                type: 'error',
                                duration: 5 * 1000
                            })
                            vm.resetSubmitInfo()
                            vm.resetForm()
                        })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetSubmitInfo() {
            const vm = this
            vm.submitInfo.productFrontImgUrl = ''
            vm.submitInfo.productBackImgUrl = ''
            vm.submitInfo.userName = ''
            vm.submitInfo.telephone = ''
        },
        resetForm() {
            const vm = this
            vm.$refs.submitInfo.resetFields()
        },
        closeModal() {
            const vm = this
            vm.isShow = false
        }
    }
}
</script>
<style scoped>
.page-search-product {
  padding-top: 50px;
}
.page-search-product .header {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #409EFF;
  border-bottom: 1px solid rgba(216, 216, 216, 0.5);
}
.page-search-product .form-wrapper {
  padding: 10px;
}
.page-search-product .form-wrapper .form-item .upload-wrapper .product-front-img-uploader,
.page-search-product .form-wrapper .form-item .upload-wrapper .product-back-img-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.page-search-product .form-wrapper .form-item .upload-wrapper .add-img-icon {
  vertical-align: top;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.page-search-product .form-wrapper .form-item .upload-wrapper .productImg {
  display: block;
  width: 100px;
  height: 100px;
}
.page-search-product .footer-btn,
.page-search-product .dialog-footer {
  width: 100%;
  vertical-align: top;
  font-size: 0;
  text-align: center;
}
.page-search-product .title-text {
  font-size: 16px;
  color: #555;
  line-height: 30px;
  text-align: center;
}
.page-search-product .response-text .label,
.page-search-product .response-text .time {
  float: left;
}
.page-search-product .response-text .time {
  margin-left: 10px;
}
.page-search-product .response-text,
.page-search-product .contact-info {
  padding: 15px 20px 0;
  text-align: center;
}
.page-search-product .response-text .time span,
.page-search-product .contact-info .time span {
  display: block;
}

</style>
